<template>
    <div>
        <div> parent canshu1 {{ canshu1 }}</div>
        <div>parent canshu2: {{ canshu2 }}</div>
        <button @click="event1">child to parent1</button>
        <button @click="event2">child to parent2</button>
    </div>
</template>

<script setup>
import { ref, defineExpose, defineProps, reactive, defineEmits } from 'vue'
const props = defineProps(['canshu1', 'canshu2'])
const emit = defineEmits(['event1', 'event2'])

const event1 = () => {
    emit('event1', 'child to parent1')
}
const event2 = () => {
    emit('event2', 'child to parent2')
}

const data1 = ref('child data1')
const data2 = ref('child data2')
const a = reactive({
    b: 1,
    c: 3,
    d: {
        e: 4
    }
})
defineExpose({
    data1,
    data2,
    a
});

</script>